import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu, Dropdown, Space } from "antd";
import { DownOutlined, SmileOutlined } from "@ant-design/icons";
import React, { useState } from "react";
import "./css/common.css";
const { Header, Sider, Content } = Layout;

const AppLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const menu = (
    <Menu
      onClick={(value) => {
        console.log("下拉菜单选中值", value);
      }}
      items={[
        {
          key: "1index",
          label: (
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.antgroup.com"
            >
              下拉菜单实验
            </a>
          ),
        },
        {
          key: "2index",
          label: (
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.aliyun.com"
            >
              2nd menu item (disabled)
            </a>
          ),
          icon: <SmileOutlined />,
          disabled: true,
        },
        {
          key: "3index",
          label: (
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="https://www.4399.com"
            >
              4399跳转链接
            </a>
          ),
        },
        {
          key: "4",
          danger: true,
          label: "a danger item",
        },
      ]}
    />
  );
  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["1"]}
          items={[
            {
              key: "1",
              icon: <UserOutlined />,
              label: "我的桌面",
            },
            {
              key: "2",
              icon: <VideoCameraOutlined />,
              label: "影视资料",
            },
            {
              key: "3",
              icon: <UploadOutlined />,
              label: "上传文档",
            },
          ]}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )}
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: "24px 16px",
            padding: 24,
            minHeight: 300,
          }}
        >
          {/* 下拉菜单 */}
          <Dropdown overlay={menu} placement="top" trigger={["click"]}>
            <a onClick={(e) => e.preventDefault()}>
              <Space>
                业务菜单
                <DownOutlined />
              </Space>
            </a>
          </Dropdown>
        </Content>
      </Layout>
    </Layout>
  );
};
export default AppLayout;
